<template>
  <div class="searchbar-wrap">
      <input type="text" :value="keyword" @input="changeKeyword" ref="keywordDom">
      <div class="result-wrap" v-show="tipList.length">
          <ul>
              <li v-for="(item,index) in tipList" :key="item.adcode+index" @click="setAddress(item)">
                  {{item.district}}--{{item.name}}
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import {autocomplete} from '@/utils/map';
import {debounce} from '@/utils/util';
export default { 
    data(){
        return {
            tipList:[],
            keyword:''
        }
    },
    methods:{
        setAddress(item){
            localStorage.setItem('positionData',`${item.district}${item.name}`);
            this.$router.push('/main');
        },
        changeKeyword:debounce('change',500,false),
        change(){
            this.keyword = this.$refs.keywordDom.value;
            autocomplete(this.keyword).then(result => {
                this.tipList = result.tips;
            }).catch(e => {
                console.log(e)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .searchbar-wrap{
        @include size(100%,44px);
        @include border-1px(bottom);
        padding:0 10px;
        input{
            width: 100%;
            height: 34px;
            margin-top:5px;
            padding:0 15px;
            border:none;
            outline:none;
            border-radius: 20px;
            background: #eee;
        }

        .result-wrap{
            width:100%;
            height: calc(100% - 44px);
            position: fixed;
            top:44px;
            left:0;
            background: #fff;
            overflow: auto;
            li{
                width:100%;
                @include border-1px(bottom);
                padding:10px;
            }
        }
    }
</style>